//0-1 导入gulp
const gulp = require('gulp')
//0-2 导入gulp-cssmin
const cssmin = require('gulp-cssmin')
//0-3 导入gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
//0-4 导入gulp-sass
const sass = require('gulp-sass')
//0-5 导入gulp-uglify
const uglify = require('gulp-uglify')
//0-6 导入gulp-bable
const bable = require('gulp-babel')
//0-7 导入gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
//0-8 导入del
const del = require('del')
//0-9 导入gulp-webserver
const webserver = require('gulp-webserver')
//0-10 导入gulp-gulp-file-include
const fileInclude = require('gulp-file-include')
//1.创建任务
//1-1 创建一个打包css的任务

const cssHandler = function(){
    return gulp
    .src('./src/css/*.css') //找到内容
    .pipe(autoPrefixer())  //自动添加前缀
    .pipe(cssmin())   //压缩
    .pipe(gulp.dest('./dist/css/')) //放在指定目录

}

//1-2 创建一个打包sass的任务
const sassHandler = function(){
    return gulp
    .src('./src/sass/*.scss')
    .pipe(sass())  
    .pipe(autoPrefixer()) 
    .pipe(cssmin())   
    .pipe(gulp.dest('./dist/sass/')) 
}

//1-3 创建一个打包js的任务
const jsHandler = function(){
    return gulp
    .src('./src/js/*.js') //1.找到js文件
    .pipe(bable({
        //babel@7,presets:['es2015']
        presets:['@babel/env']
    }))      //转换e5
   // .pipe(uglify())      //压缩
    .pipe(gulp.dest('./dist/js/')) 
}

//1-4 创建一个打包html的任务
const htmlHandler = function(){
    return gulp
    .src('./src/pages/*.html') //1.找到js文件
    .pipe(fileInclude({ //根据你的配置导入对应的html片段
        prefix:'@-@',//你自定义的一个标识符
        basepath:'./src/components'//基准目录，你的组件文件都在哪个目录里面

    }))
    .pipe(htmlmin({//通过配置的参数压缩
    //  collapseWhitespace:true,//表示移出空格
      removeEmptyAttributes:true,//表示移出空的属性(仅限于原生属性)
      collapseBooleanAttributes:true,//移出checked类似的布尔值属性
      removeAttributeQuotes:true,//移除属性的双引号
      minifyCSS:true,//压缩内嵌式css代码(只能基础压缩，不能自动添加前缀)
      minifyJS:true,//压缩内嵌式js代码(只能基础压缩，不能进行转码)
      removeStyleLinkTypeAttributes:true,//移出style和link标签上的type
      removeScriptTypeAttributes:true,//移除script标签上默认的type属性
    }))      //压缩
    .pipe(gulp.dest('./dist/pages/')) 
}

//1-5 创建一个打包images 文件的任务
const imgHandler = function(){
    return gulp
    .src('./src/images/**')
    .pipe(gulp.dest('./dist/images/'))
}

//1-6 创建一个打包video 文件的任务
const videoHandler = function(){
    return gulp
    .src('./src/videos/**')
    .pipe(gulp.dest('./dist/videos/'))
}

//1-7 创建一个打包audio 文件的任务
const audioHandler = function(){
    return gulp
    .src('./src/audios/**')
    .pipe(gulp.dest('./dist/audios/'))
}

//1-8 创建一个打包第三方 文件的任务
const libHandler = function(){
    return gulp
    .src('./src/lib/**/*')
    .pipe(gulp.dest('./dist/lib/'))
}

//1-9 创建一个打包fonts 文件的任务
const fontsHandler = function(){
    return gulp
    .src('./src/fonts/**/*')
    .pipe(gulp.dest('./dist/fonts/'))
}
//1-10 创建一个删除dist目录 的任务
const delHandler = function(){
    //del 直接执行就可以了，不需要流
    //参数以数组的形式传递你要删除的文件夹
    return del(['./dist/'])
}
//1-11 创建一个启动服务器 的任务
const webHandler = function(){
    return gulp
    .src('./dist')
    .pipe(webserver({
        host:'localhost',//域名 (可以配置自定义域名)
        port:'8080',//端口号
        livereload:true,//当文件修改的时候，是否自动刷新页面
        open:'./pages/index.html',//默认打开哪一个文件
        proxies:[//配置你的所有代理
            //每一个代理就是一个对象数据类型
            //注意：如果你没有代理，不要写空对象
            {
                //代理表示符
                source:'/dt',
                //代理目标地址
                target:'https://www.duitang.com/napi/blog/list/by_filter_id/'
            }
        ]
    }))
}

//1-12 创建一个监控任务
const watchHandler = function(){
    //使用gulp.watch()
    gulp.watch('./src/css/*.css',cssHandler)
    gulp.watch('./src/sass/*.scss',sassHandler)
    gulp.watch('./src/js/*.js',jsHandler)
    gulp.watch('./src/pages/*.html',htmlHandler)
    gulp.watch('./src/images/**/*',imgHandler)
    gulp.watch('./src/video/**/*',videoHandler)
    gulp.watch('./src/audio/**/*',audioHandler)
    gulp.watch('./src/lib/**/*',libHandler)
    gulp.watch('./src/fonts/**/*',fontsHandler)
}

//2.导出任务 作用是单独执行
//2-1 导出打包css任务
module.exports.cssHandler = cssHandler
//2-2 导出打包 sass的任务
module.exports.sassHandler = sassHandler

//2-3 导出打包 js的任务
module.exports.jsHandler = jsHandler

//2-4 导出打包 html的任务
module.exports.htmlHandler = htmlHandler

//2-5 导出打包 img的任务
module.exports.imgHandler = imgHandler

//2-6 导出打包 video的任务
module.exports.videoHandler = videoHandler

//2-7 导出打包 audio的任务
module.exports.audioHandler = audioHandler

//2-8 导出打包 第三方的任务
module.exports.libHandler = libHandler

//2-9 导出打包 fonts的任务
module.exports.fontsHandler = fontsHandler

//2-10 导出删除dist的任务
module.exports.delHandler = delHandler


//添加完毕监控任务以后，修改default任务
module.exports.default = gulp.series(
    delHandler,
    gulp.parallel(cssHandler,sassHandler,jsHandler,htmlHandler,imgHandler,videoHandler,audioHandler,libHandler,fontsHandler),
    webHandler,
    watchHandler
)
